<template>
    <view class="activity">
        <view class="activity-title">中签得金豆</view>
        <view class="activity-info">
            <view class="activity-info-people">
                <text>当前报名人数</text>
                <text>{{ ext.grabNum }}</text>
            </view>
            <view class="activity-info-time">
                <u-count-down
                        :time="ext.grab_end_time"
                        format="HH:mm:ss"
                        :autoStart="ext.grab_end_time > 0"
                        @change="countChange"
                >
                    <view class="time">
                        <u-icon
                            name="https://img.ionepin.com/c4098afeac81d4e598d2e59508b9cd091b3b1405.png"
                            width="30rpx"
                            height="30rpx"
                        ></u-icon>
                        <text>抢购倒计时</text>
                        <text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                        <text class="time__item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                        <text class="time__item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
                    </view>
                </u-count-down>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "index",
        props: {
            ext: {
                type:Object,
                default: () => {}
            }
        },
        data() {
          return {
              timeData: {}
          }
        },
        methods: {
            countChange(e) {
                this.timeData = {
                    hours: e.hours + e.days * 24,
                    minutes: e.minutes,
                    seconds: e.seconds
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .activity {
        box-sizing: border-box;
        background: url("https://img.ionepin.com/8414ff5800cc06b3b31e6c2ff3aa10fce810bb51.png") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 104rpx;
        //position: fixed;
        //bottom: 100rpx;
        left: 0;
        .activity-title {
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            margin-top: 6rpx;
        }
        .activity-info {
            //margin-top: 8rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .activity-info-people {
                margin-left: 25rpx;
                text {
                    &:nth-child(1) {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #C0C7FF;
                        line-height: 33rpx;
                    }
                    &:nth-child(2) {
                        margin-left: 10rpx;
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #FFFFFF;
                        line-height: 40rpx;
                    }
                }
            }
            .activity-info-time {
                margin-right: 24rpx;
                .time {
                    display: flex;
                    text {
                        display: block;
                        font-size: 24rpx;
                        font-weight: bold;
                        color: #F7BA00;
                        margin-left: 8rpx;
                        line-height: 33px;
                    }
                    margin-left: 8rpx;
                    .time__item {
                        font-size: 24rpx;
                        font-weight: bold;
                        color: #F7BA00;
                        line-height: 33px;
                    }
                }
            }
        }
    }
</style>
